<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="test"></div>
    <div class="test1"></div>
    <div class="test"></div>
    <script>
      // css in js   React.js 
      // 前端开发的时候， 直接在js中写css的代码，融入js的语法
      //  react   all in js 

      let colorRed = "red", colorGreen = "green";

      let width = 100, height = 100;

      let isRed = false

      // 实现效果如下：
      style(".test")`
            background-color: ${isRed ? colorRed: colorGreen};
            width: ${width * 2}px;
            height: ${height}px;
      `;

      style(".test1")`
          width:  ${Math.random() * 30 + 20}vw;
          height: ${Math.random() * 30 + 20}vw;
          border: 3px solid orange;
          background: lightblue;
          margin: 10px;
      `;
      //   fn`hello world`

      // 写一个style函数
      function style(qs) {
        let elements = document.querySelectorAll(qs)

        return function(stringArr, ...args) {
          // 1. stringArr 和 args中的数据 拼接成完整的css的字符串
          console.log(stringArr);
          console.log(args);

          let cssStr = getCssStr(stringArr,args);

          // 2.把拼接完的css字符串作为获取的页面元素的style属性添加上去
          //   [].slice.call(elements);
          //   把伪数组转换成真数组
          for(let i = 0;i<elements.length;i++){
              elements[i].style = cssStr;
          }  
        }
      }

      function getCssStr(stringArr,args){
          let index;
          let tmpArr = [];

        //   tmpArr [stringArr[0],args[0],string[1],args[1]]
          for(index = 0;index < args.length;index++){
              tmpArr.push(stringArr[index],args[index]);
          }
          tmpArr.push(stringArr[index]);
          console.log("index",index);
        console.log(tmpArr);

        return tmpArr.join("")


      }
    </script>
</body>
</html>